<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增员工')" />
	<th:block th:include="include :: select2-css" />
    <th:block th:include="include :: ztree-css" />
</head>
<body>
    <div class="main-content">
        <form id="form-user-add" class="form-horizontal">
            <input name="deptId" type="hidden" id="treeId"/>
            <!--<input name="post" type="hidden" id="post"/>-->
            <input name="homeMenu" type="hidden" id="homeMenu"/>
            <input name="functionMenu" type="hidden" id="functionMenu"/>
            <h4 class="form-header h4">员工信息</h4>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">员工姓名：</label>
                        <div class="col-sm-8">
                            <input name="userName" autocomplete="off" placeholder="请输入员工姓名" class="form-control" type="text" maxlength="30" required>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">归属部门：</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                            	<input name="deptName" onclick="selectDeptTree()" id="treeName" type="text" placeholder="请选择归属部门" class="form-control" required>
                                <span class="input-group-addon"><i class="fa fa-search"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">手机号码：</label>
                        <div class="col-sm-8">
                            <input id="phonenumber" autocomplete="off" name="phonenumber" placeholder="请输入手机号码" class="form-control" type="text" maxlength="11" required>
                            <!--<span class="input-group-addon"><i class="fa fa-mobile"></i></span>-->
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">设置登录账号：</label>
                        <div class="col-sm-8">
                            <input id="loginName" autocomplete="off" name="loginName" placeholder="请输入登录账号（提示：可以使用手机号）" class="form-control" type="text" maxlength="30" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">设置登录密码：</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <input id="password" autocomplete="off" name="password" placeholder="请输入登录密码" class="form-control" type="text" th:value="${@config.getKey('sys.user.initPassword')}" required>
                                <!--<span class="input-group-addon" title="登录密码,鼠标按下显示密码"
                                    onmousedown="$('#password').attr('type','text')"
                                    onmouseup="$('#password').attr('type','password')"><i class="fa fa-key"></i></span>-->
                                <span class="input-group-addon"><i class="fa fa-user-secret"></i>初始密码123456，可以根据需要修改</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">用户状态：</label>
                        <div class="col-sm-8">
                            <label class="toggle-switch switch-solid">
                                <input type="checkbox" id="status" checked>
                                <span></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="col-xs-2 control-label">岗位：</label>
                                <div class="col-xs-4">
                                    <select id="post" class="form-control select2-multiple" multiple>
                                        <option th:each="post:${posts}" th:value="${post.postId}" th:text="${post.postName}" th:disabled="${post.status == '1'}"></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="col-xs-2 control-label">角色：</label>
                                <div class="col-xs-10">
                                    <label th:each="role:${roles}" class="check-box">
                                        <input name="role" type="checkbox" th:value="${role.roleId}" th:text="${role.roleName}" th:disabled="${role.status == '1'}">
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
            <h4 class="form-header h4">其他信息</h4>
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label">岗位职责+要求：</label>
                        <div class="col-xs-10">
                            <textarea name="remark" maxlength="500" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
      
    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
        </div>
    </div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: select2-js" />
    <th:block th:include="include :: ztree-js" />
	<script>
	    var prefix = ctx + "system/user";
	
        $("#form-user-add").validate({
        	onkeyup: false,
        	rules:{
        		loginName:{
        			minlength: 2,
        			maxlength: 20,
        			remote: {
                        url: prefix + "/checkLoginNameUnique",
                        type: "post",
                        dataType: "json",
                        data: {
                        	"loginName": function() {
                                return $.common.trim($("#loginName").val());
                            }
                        },
                        dataFilter: function(data, type) {
                        	return $.validate.unique(data);
                        }
                    }
        		},
        		password:{
        			minlength: 5,
        			maxlength: 20
        		},
        		email:{
                    email:true,
                    remote: {
                        url: prefix + "/checkEmailUnique",
                        type: "post",
                        dataType: "json",
                        data: {
                            "email": function () {
                                return $.common.trim($("#email").val());
                            }
                        },
                        dataFilter: function (data, type) {
                        	return $.validate.unique(data);
                        }
                    }
        		},
        		phonenumber:{
        			isPhone:true,
                    remote: {
                        url: prefix + "/checkPhoneUnique",
                        type: "post",
                        dataType: "json",
                        data: {
                            "phonenumber": function () {
                                return $.common.trim($("#phonenumber").val());
                            }
                        },
                        dataFilter: function (data, type) {
                        	return $.validate.unique(data);
                        }
                    }
        		},
        	},
        	messages: {
                "loginName": {
                    remote: "用户已经存在"
                },
        		"email": {
                    remote: "Email已经存在"
                },
        		"phonenumber":{
                	remote: "手机号码已经存在"
        		}
            },
            focusCleanup: true
        });
        
        /*function submitHandler() {
            debugger;
			var password = $("#password").val();
	        if ($.validate.form()) {
	        	var data = $("#form-user-add").serializeArray();
	        	var status = $("input[id='status']").is(':checked') == true ? 0 : 1;
	        	var roleIds = $.form.selectCheckeds("functionMenu");
	        	var postIds = $("#post").val();
	        	var homeMenus = $.form.selectSelects("homeMenu");
	        	data.push({"name": "status", "value": status});
	        	data.push({"name": "functionMenu", "value": roleIds});
	        	data.push({"name": "postIds", "value": postIds});
	        	data.push({"name": "homeMenus", "value": homeMenus});
	        	$.operate.saveTab(prefix + "/add", data);
	        }
	    }
*/
        function submitHandler() {
            var chrtype = [[${#strings.defaultString(@config.getKey('sys.account.chrtype'), 0)}]];
            var password = $("#password").val();
            if ($.validate.form() && checkpwd(chrtype, password)) {
                var data = $("#form-user-add").serializeArray();
                var status = $("input[id='status']").is(':checked') == true ? 0 : 1;
                var roleIds = $.form.selectCheckeds("role");
                var postIds = $.form.selectSelects("post");
                data.push({"name": "status", "value": status});
                data.push({"name": "roleIds", "value": roleIds});
                data.push({"name": "postIds", "value": postIds});
                $.operate.saveTab(prefix + "/add", data);
            }
        }

        /* 用户管理-新增-选择部门树 */
        function selectDeptTree() {
        	var treeId = $("#treeId").val();
        	var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
        	var url = ctx + "system/dept/selectDeptTree/" + deptId;
			var options = {
				title: '选择部门',
				width: "380",
				url: url,
				callBack: doSubmit
			};
			$.modal.openOptions(options);
		}
		
		function doSubmit(index, layero){
			var tree = layero.find("iframe")[0].contentWindow.$._tree;
			if ($.tree.notAllowParents(tree)) {
				var body = layer.getChildFrame('body', index);
    			$("#treeId").val(body.find('#treeId').val());
    			$("#treeName").val(body.find('#treeName').val());
    			layer.close(index);
			}
		}

		/*$(function() {
            $('#post').select2({
                placeholder: "请选择岗位",
                allowClear: true
            });
        })*/

       /* function addRole() {
            $.modal.open("添加角色", ctx + "system/role/add");
        }

        function addPost() {
            layer.open({
                type: 2,
                area: ['800px', '600px'],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: "选择岗位",
                content:  ctx + "system/post",
                // 弹层外区域关闭
                shadeClose: true,
                end: function(){
                    //location.reload();
                },
                cancel: function(index) {
                    //location.reload();
                }
            });
        }*/

        /*function deletePost() {
            $.modal.open("删除岗位",ctx + "system/post");
        }

        function deleteRole() {
            $.modal.open("删除角色",ctx + "system/role");
        }*/

       /*function showRole() {
           //获取被选中的option标签
           var vs = $('#role  option:selected').val();
           if(vs != '' && vs != NaN && vs !=undefined){
               var url = ctx + "system/menu/roleMenuTreeData?roleId=" + vs;
               var options = {
                   id: "menuTrees",
                   url: url,
                   check: { enable: true },
                   expandLevel: 0
               };
               $.tree.init(options);
           }
        };

        $('input').on('ifChanged', function(obj){
            var type = $(this).val();
            var checked = obj.currentTarget.checked;
            if (type == 1) {
                if (checked) {
                    $._tree.expandAll(true);
                } else {
                    $._tree.expandAll(false);
                }
            } else if (type == "2") {
                if (checked) {
                    $._tree.checkAllNodes(true);
                } else {
                    $._tree.checkAllNodes(false);
                }
            } else if (type == "3") {
                if (checked) {
                    $._tree.setting.check.chkboxType = { "Y": "ps", "N": "ps" };
                } else {
                    $._tree.setting.check.chkboxType = { "Y": "", "N": "" };
                }
            }
        })
        
        function choseMenu() {
            debugger;
            var homeMenu = $("#homeMenu").val();
            var functionMenu = $("#functionMenu").val();
            var roleId =0;
            if(homeMenu != '' && homeMenu != NaN && homeMenu !=undefined){
                roleId = 999;
            }
            if(functionMenu != '' && functionMenu != NaN && functionMenu !=undefined){
                roleId = 999;
            }
            var url = ctx + "system/user/choseMenu/"+roleId;
            layer.open({
                type: 2,
                area: ['800px', '600px'],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: "业务功能设置",
                content:  url,
                /!*closeBtn:true,*!/
                // 弹层外区域关闭
                shadeClose: true,
                end: function(){
                    //location.reload();
                },
                cancel: function(index) {
                    //location.reload();
                }
            });
        }

        function addTableColumn() {
            $("#menuText").val("已完成设置，更改请点击右侧按钮！")
        }*/
    </script>
</body>
</html>